<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-calendar>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template
          slot="dateCell"
          class="dateTep"
          slot-scope="{date, data}">
          <div>
        
            <p class="dayText">
              {{ data.day.split('-')[2] }}

              <span style="text-align: right;">22</span>
              <!-- {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}} -->
            </p>
            <div style="height:100px;overflow-y:auto">
              <p class="text" v-for="index in 4" v-on:click="test(date,data)">
                11232
              </p>
            </div>

            
            <!-- <div  v-on:click="showdrawer(data)">查看更多</div> -->
          </div>


        </template>
      </el-calendar>

  
      <el-drawer
      title="共10项任务"
      :visible.sync="drawer"
      :direction="direction"
      size="450px"
      v-on:opened="openedDrawer"
      :before-close="handleClose">
     
        <div class="drawerList">
          <div class="stepsLine">
          </div>
          <div>
            <div class="longLine"></div>
            <div class="list">
              <div> 
                <span class="line"></span> 
                <span class="time">9.00</span>
                <span class="circular">
                </span>
                111111</div>
              <div>22222</div>
              <div>33333</div>
              <!-- <div>44444</div> -->
            </div>
            <div class="list">
              <div> 
                <span class="line"></span> 
                <span class="time">10.00</span>
                <span class="circular">
                </span>
                111111</div>
              <div>22222</div>
            </div>
            <div class="list">
              <div> 
                <span class="line"></span> 
                <span class="time">11.00</span>
                <span class="circular">
                </span>
                111111</div>
            </div>
          </div>

        </div>

    </el-drawer>

  </div>
</body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
          drawer: false,
          direction: 'rtl',
        }
      },
      mounted(){
       
      },
      methods:{
        openedDrawer:function(event){
          var listNode = $('.drawerList>div:last-child >div.list');
          listNode.each(function(index,item){
            var divLength = $(item).find('div').length;
            $(item).find('>div:first-child .line').height(((divLength-1) * 105 ) + '%') // 设置竖线

            
          })

          // .drawerList>div:last-child >div.list>div:first-child .line
          // .drawerList>div:last-child >div.list>div:first-child::before
        },
        handleClose:function(done){
          done();
        },
        showdrawer:function(data){
          if(data.type == 'current-month'){
            this.drawer = true;
          }
        
            
        },
        test:function(date,data){
          console.log(date,data);
        }
      }
    })
  </script>


<style>
  .drawerList{
    display: flex;
    padding-left:20px;
    box-sizing: border-box;
  }
  .drawerList .longLine{
    width: 2px;
    background: red;
    height: 100%;
    position: absolute;
    left: 28px;
    z-index: 0;
  }
  .drawerList>div:first-child{
    width: 80px;
  }
  .drawerList>div:first-child .el-step.is-vertical .el-step__title{
    line-height: 9px;
    padding-bottom: 25px;
    position: relative;
    top: 40px;
  }
  .drawerList>div:last-child{
    width: 320px;
  }
  .drawerList>div:last-child{
    width: 320px;
  }
  .drawerList>div:last-child >div.list{
    margin-bottom:30px;

  }
  .drawerList>div:last-child >div.list>div{
    width: 100%;
    height: 200px;
    background:#a288d2;
    margin-bottom:10px;
    position: relative;
  }
  .drawerList>div:last-child >div.list>div:first-child::after{
    content: '';
    width: 60px;
    height: 2px;
    background: red;
    display: inline-block;
    position: absolute;
    left: -60px;
    top: 50%;
  }
  .drawerList>div:last-child >div.list>div:first-child .line{
    width: 2px;
    /* height:200%; */
    background: red;
    display: inline-block;
    position: absolute;
    left: -20px;
    top: 50%;
  }

  .drawerList>div:last-child >div.list>div:first-child .time{
    width: 2px;
    display: inline-block;
    position: absolute;
    left: -50px;
    top: 40%;
    font-size: 13px;
  }
  .drawerList>div:last-child >div.list>div:first-child .circular{
    width: 18px;
    height: 18px;
    display: inline-block;
    position: absolute;
    left: -82px;
    top: 45%;
    border: 2px solid red;
    font-size: 13px;
    border-radius: 50%;
    position: absolute;
    z-index: 999;
    background: #fff;
  }
  .drawerList>div:last-child >div.list>div:first-child .circular::after{
    content: '';
    width: 12px;
    height: 12px;
    background: red;
    display: inline-block;
    position: absolute;
    left: 3px;
    top: 3px;
    border-radius: 50%;
  }

  
  .drawerList>div:last-child >div.list>div::after{
    content: '';
    width: 20px;
    height: 2px;
    background: red;
    display: inline-block;
    position: absolute;
    left: -20px;
    top: 50%;
  }



  .dayText{
    font-size: 13px;
    position: relative;
  }
  .dayText span{
    position: absolute;
    right: 0;
  }
  .is-selected {
    /* color: #1989FA; */
  }
  .text{
    line-height: 10px;
      font-size: 12px;
  }
  .el-calendar-table td{
    height: 130px;
  }
  .el-calendar-table .el-calendar-day{
    height: 100%;
  }

</style>
</html>